<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>订单详情</title>
    <link rel="stylesheet" href="../../css/aui.css">
    <link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
    <link rel="stylesheet" type="text/css" href="./css/order_detail.css" />
    <script type="text/javascript" src="../../js/base.js"></script>
    <style type="text/css">
        .textarea-copy{
            height: 1rem;
        }
        .textarea-copyone{
            height: 1rem;
            float: right;
            width: 75%;
        }
        @media screen and (max-width:321px){
           .shouhou{
              position:absolute;
               right:0.5rem;
            }
            .textarea-copyone{
                width: 78%;
            }
        }
        @media screen and (min-width:322px) and (max-width:376px){
            .textarea-copyone{
                width: 81%;
            }

        }
        @media screen and (min-width:377px) and (max-width:415px){
            .aui-dialog-footer{  border-top: 1px solid #ddd;background-size:100% 0 }
            .textarea-copyone{
                width: 81%;
            }

        }
        @media screen and (min-width:416px) and (max-width:768px){
            .aui-dialog-footer{  border-top: 1px solid #ddd;background-size:100% 0 }
            .textarea-copyone{
                width: 83%;
            }
        }

    </style>
</head>
<body>
<!--<header class="aui-bar aui-bar-nav aui-bar-top">-->
    <!--<a class="aui-pull-left aui-btn goBack" >-->
        <!--<span class="aui-iconfont aui-icon-left"></span>-->
    <!--</a>-->
    <!--<div class="aui-title">订单详情</div>-->
<!--</header>-->
<section id="app" v-cloak>
    <div  v-if="navigator && navigator.onLine === true">
        <div class="aui-flex-col aui-flex-item-12 pay_tit" style="position: relative;color:#fff">
            <div class="aui-flex-item-1" style="padding-top:0.5rem">
                <img src="../../icon/4-1/jilu.png" style="width:1rem" alt="">
            </div>
            <div class="aui-flex-item-9" style="padding-top:0.5rem;padding-left: 0.2rem">
                <div class="aui-font-size-16" style="font-weight: bold">{{getOrderStatus(goodsIndentInfo.order_status)}}</div>
                <div class="aui-font-size-14 order-a" style="width:12rem;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"  v-html="orderStatusDesc"></div>
                <div class="aui-margin-t-10 aui-font-size-14">{{orderStatusDetail.lastTraces.AcceptTime}}</div>
            </div>
            <div class="aui-flex-item-2" style="position: relative" @click="goWuliu(goodsIndentInfo.order_id)">
                <i class="aui-iconfont aui-icon-right" style="position: absolute;top:50%;right:0.5rem;margin-top:-.5rem" ></i>
            </div>
        </div>
        <div style="clear: both"></div>
        <div>
            <div class="address" v-for="orderInfo in orderStatusDetail.orderDetail">
                <div>
                    <div class="aui-pull-left"  style="width:5rem;position: relative">
                        <img src="../../icon/1-3/map.png" style="width:1.3rem" alt="">
                        <div style="position: absolute;top:0.2rem;left:1.5rem">{{orderInfo.consignee}}   </div>
                    </div>
                    <div class="aui-pull-right">
                        <span>{{orderInfo.tel}}</span>
                    </div>
                </div>
                <div style="clear: both"></div>
                <div class="aui-padded-t-10" style="margin-left:1.5rem">{{orderInfo.provice_name}}{{orderInfo.city_name}}{{orderInfo.district_name}}  {{orderInfo.address}}</div>
            </div>
            <div style="clear: both"></div>
            <div class=" aui-padded-t-5aui-padded-b-5 goodsList">
                <div class="aui-grid-label aui-font-size-12 ">
                    <img src="../../icon/4-1/home.png" style="height:0.8rem; line-height: 0.8rem;position:relative;top:0.7rem;left:0.1rem">
                    <img src="../../icon/logo.png" style="height:0.8rem; line-height: 0.8rem;position:relative;left:1.2rem" alt="">
                    <span class="textCol"> 小普微信商城专营</span>
                </div>
            </div>
            <div  class="aui-grid" style="padding-bottom: 0.5rem" v-for="childrenGoods,index in goodsIndentInfo.children">
                <div class="aui-row" style="height:5rem">
                    <div  @click="goGoodsDetail(childrenGoods.goods_id)">
                        <div class="aui-col-xs-3 aui-padded-l-15">
                            <img v-bind:src="getImage(childrenGoods.goods_image)" alt="">
                        </div>
                        <div class="aui-col-xs-6 aui-padded-l-10 aui-text-left" >
                            <div class="aui-grid-label aui-margin-0 aui-font-size-16  " style="width:8rem;overflow: hidden;white-space:nowrap;text-overflow: ellipsis;">{{childrenGoods.goods_name}}</div>
                            <div class="aui-grid-label aui-font-size-12  aui-margin-0   textCol ">{{getTypeAndColor(childrenGoods.attrText,0)}}</div>
                            <div class="aui-grid-label aui-font-size-12  aui-margin-0  textCol" style="overflow: hidden">{{getTypeAndColor(childrenGoods.attrText,1)}}</div>
                            <!--<div class="aui-grid-label aui-font-size-12 aui-text-danger aui-margin-0"><img src="../../icon/2-1/fenxiang.png" style="height:0.5rem"></div>-->
                            <!--<div  class="aui-grid-label aui-margin-0 aui-font-size-12 aui-margin-b-5  textCol">推荐人:{{childrenGoods.refere_name}}</div>-->
                            <div v-if="childrenGoods.refere_name && !tuijianrenInfo.isOneUser" class="aui-grid-label aui-margin-0 aui-font-size-12 aui-margin-b-5  textCol">推荐人:{{childrenGoods.refere_name}}</div>

                        </div>
                    </div>


                    <div class="aui-col-xs-3  aui-text-right aui-padded-r-10" style="position:relative">
                        <div class="aui-font-size-12 ">￥{{childrenGoods.shop_price}}</div>
                        <div class="aui-grid-label aui-font-size-12 aui-margin-b-5 textCol" style="text-decoration:line-through;margin-top:0">￥{{childrenGoods.goods_price}}</div>
                        <!--<div class="aui-font-size-12 aui-margin-b-10 textColor">重量:0.020Kg</div>-->
                        <div class="aui-grid-label aui-font-size-12 textCol">X{{childrenGoods.goods_number}}</div>
                        <div class="aui-btn aui-btn-info shouhou" v-if="goodsIndentInfo.order_status==3 || goodsIndentInfo.order_status==2 || goodsIndentInfo.order_status==4"  @click="goAfterSale(index)"> {{getFaHuoStatus(goodsIndentInfo.order_status)}}</div>
                    </div>
                </div>
            </div>
            <div style="width:100%;background: #fff">
                <div v-if="tuijianrenInfo.isOneUser" class="order_list aui-margin-t-10" style="width:94%;margin:0 3%">
                    <div>
                        <div class="aui-pull-left textCol">
                            推荐人
                        </div>
                        <div class="aui-pull-right fontColor">
                            <span>{{goodsIndentInfo.refere_name}}</span>
                        </div>
                    </div>
                </div>
                <div v-else>

                </div>

                <div class="order_list textCol" style="width:94%;margin:0 3%">
                    <div class="aui-pull-left">
                        商品总价
                    </div>
                    <div class="aui-pull-right  ">
                        ￥<span>{{countMoney}}.00</span>
                    </div>
                </div>
                <p style="clear: both"></p>
            <div class="order_list textCol" style="width:94%;margin:0 3%">
                <div class="aui-pull-left">
                    应付总额
                </div>
                <div class="aui-pull-right fontColor">
                    ￥<span>{{goodsIndentInfo.order_amount-goodsIndentInfo.coupon_money}}.00</span>
                </div>
            </div>
                <p style="clear: both"></p>
                <div class="order_list textCol" style="width:94%;margin:0 3%">
                    <div class="aui-pull-left">
                        活动优惠
                    </div>
                    <div class="aui-pull-right"  v-if="goodsIndentInfo.coupon_money">
                        -￥<span>{{goodsIndentInfo.coupon_money}}</span>
                    </div>
                    <div v-else class="aui-pull-right ">
                        ￥<span>0.00</span>
                    </div>
                </div>

                <p style="clear: both"></p>
                <div class="order_list textCol"  style="width:94%;margin:0 3%;border:0">
                    <div class="aui-pull-left">
                        运费
                    </div>
                    <div class="aui-pull-right ">
                        ￥<span>0.00</span>
                    </div>
                </div>
            </div>

            <p style="clear: both"></p>
            <div class="aui-content aui-margin-t-10 faPiao">
                <div>发票信息</div>
                <p style="border-bottom:1px solid #efefef;width:96%;margin:0 3%"></p>
                <div class="textCol"  v-if="!invoice">不需要发票</div>
                <div class="textCol"  v-if="invoice && invoice.porc =='1'">{{invoice.c_name}}</div>
                <div class="textCol"  v-if="invoice && invoice.porc == '0'">{{invoice.p_tel}}</div>
            </div>
            <div class="aui-margin-t-10 indentInfo">
                <div class=" aui-padded-b-10"  style="width:94%;margin:0 3%;border-bottom:1px solid #efefef">
                    <div class="aui-padded-t-10 aui-padded-b-5"  id="article1">订单编号:&nbsp;  <textarea class="textarea-copyone" id="copyOne"  readonly="readonly"  >{{goodsIndentInfo.order_sn}}</textarea></div>
                    <input class="aui-pull-right copyBtn textCol" type="button" value="复制"   data-clipboard-action="copy" data-clipboard-target="#copyOne"  >
                    <div>
                        <div>
                            <div class="aui-pull-left ">支付方式:&nbsp;  {{goodsIndentInfo.pay_name}}</div>
                        </div>
                    </div>
                    <p style="clear: both"></p>
                </div>
                <div class=" aui-padded-10 aui-padded-b-5">
                    <div>支付交易单号:</div>
                    <div  id="article2" class="aui-padded-t-5 aui-padded-b-5"><textarea  class="textarea-copy"  id="copyTwo"  readonly="readonly" >{{goodsIndentInfo.transaction_id}}</textarea></div>
                    <input class="aui-pull-right copyBtn textCol" type="button" value="复制"  data-clipboard-action="copy" data-clipboard-target="#copyTwo"  >
                    <div>
                        <div>
                            <div class="aui-pull-left">下单时间: &nbsp; {{dateTime(goodsIndentInfo.add_time+"000")}}</div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="aui-flex-col aui-flex-item-12 telBtn">
            <div class="aui-flex-item-4 aui-flex-offset-1 " @click="showTel(1)">
            <img src="../../icon/4-1/lxxp.png" alt="">
            </div>
            <div class="aui-flex-item-4 aui-flex-offset-2"  @click="showTel(2)">
            <img src="../../icon/4-1/tel.png" alt="">
            </div>
            </div>
        </div>
    </div>

    <div v-if="navigator && navigator.onLine === false" style="position:relative;" @click="goOnLine()">
        <div style="position:absolute;top:50%;left:50%;margin-top:8rem;margin-left: -3rem">
            <img src="../../icon/duanwang.png" alt="" style="width:6rem">
            <div class="aui-text-center">暂无网络</div>
        </div>
        <div  class="aui-text-center textCol" style="position:absolute;top:50%;left:50%;margin-top:15rem;margin-left: -86px">请连接网络后,点击刷新</div>
    </div>
</section>
<script type="text/javascript" src="../../js/zepto.min.js"></script>
<script type="text/javascript" src="../../js/vue.min.js"></script>
<script type="text/javascript" src="../../js/api.js"></script>
<script type="text/javascript" src="../../js/aui-toast.js"></script>
<script type="text/javascript" src="../../js/aui-dialog.js"></script>
<script type="text/javascript" src="../../js/aui-tab.js"></script>
<script type="text/javascript" src="../../js/clipboard.min.js"></script>
<script type="text/javascript" src="./js/order_detail.js" ></script>

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript" src="../../js/weixin.js" ></script>

</body>
</html>